<template>
    <div>
        <!--    头部区域-->
        <div style="height: 60px;line-height: 60px;background-color: white ;margin-bottom: 2px;display: flex">
            <div style="width: 300px">
                <img src="@/assets/logo.png" alt="" style="width: 40px; position: relative; top: 10px;left: 20px">
                <span style="margin-left: 25px; font-size: 24px">图书管理系统</span>
            </div>
            <div style="flex: 1; text-align: right; padding-right: 20px">
                <el-dropdown size="medium">
                      <span class="el-dropdown-link" style="cursor: pointer">
                        {{admin.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                    <el-dropdown-menu slot="dropdown" style="margin-top: -5px">
                        <el-dropdown-item>
                            <div style="width: 50px; text-align: center;" @click="logout">退出</div>
                        </el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>

            </div>

        </div>
        <!--        侧边栏和主体-->
        <div style="display: flex">
            <!-- 侧边栏导航 -->
            <div style="width: 200px; min-height: calc(100vh - 62px); overflow: hidden; margin-right: 2px; background-color: white">
                <!--     :default-openeds="['user','admin']"    默认打开user admin菜单 这是一个数组 通过index可以选择打开的页面
                     / 代表首页 这里填/后点击菜单会默认关闭 所以删掉-->
                <el-menu :default-active="$route.path"
                         router class="el-menu-demo" style="margin-bottom: 10px">
                    <el-menu-item index="/">
                        <i class="el-icon-eleme"></i>
                        <span>首页</span>
                    </el-menu-item>
                    <el-submenu index="user">
                        <template slot="title">
                            <i class="el-icon-question"></i>
                            <span>会员管理</span>
                        </template>
                        <el-menu-item index="/userList">会员列表</el-menu-item>
                        <el-menu-item index="/addUser">会员添加</el-menu-item>
                    </el-submenu>
                    <el-submenu index="admin">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>管理员管理</span>
                        </template>
                        <el-menu-item index="/adminList">管理员列表</el-menu-item>
                        <el-menu-item index="/addAdmin">管理员添加</el-menu-item>
                    </el-submenu>
                    <el-submenu index="category">
                        <template slot="title">
                            <i class="el-icon-s-operation"></i>
                            <span>图书分类</span>
                        </template>
                        <el-menu-item index="/categoryList">分类列表</el-menu-item>
                        <el-menu-item index="/addCategory">分类添加</el-menu-item>
                    </el-submenu>
                    <el-submenu index="book">
                        <template slot="title">
                            <i class="el-icon-notebook-1"></i>
                            <span>图书管理</span>
                        </template>
                        <el-menu-item index="/bookList">图书列表</el-menu-item>
                        <el-menu-item index="/addBook">图书添加</el-menu-item>
                    </el-submenu>
                    <el-submenu index="borrow">
                        <template slot="title">
                            <i class="el-icon-notebook-2"></i>
                            <span>借书管理</span>
                        </template>
                        <el-menu-item index="/borrowList">借书记录</el-menu-item>
                        <el-menu-item index="/addBorrow">借书添加</el-menu-item>
                    </el-submenu>
                    <el-submenu index="returnBooks">
                      <template slot="title">
                           <i class="el-icon-notebook-2"></i>
                         <span>还书管理</span>
                       </template>
                        <el-menu-item index="/returnBooksList">还书记录</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <!-- 主体数据 -->
            <!-- width: 0;可以限制容器的宽度，不被子元素无限撑开-->
            <div style="flex: 1; width: 0; background-color: white; padding: 10px">
                <router-view/>
            </div>


        </div>
    </div>
</template>

<script>

    import Cookies from "js-cookie"

    export default {
        name: "Layout",
        data() {
            //判断Cookies.get('user')是否为空 如果cookies中有user 返回出来 没有则返回空
            return {
                admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {}
            }
        },
        methods: {
            logout() {
                //清除浏览器用户数据 Cookies保存的数据
                Cookies.remove('admin')
                this.$router.push('/login')


            }
        }
    }
</script>

<style scoped>

</style>